<template>
	<view class="page-wrap">
		<!-- <model-nav-bar title="首页" titlecolor="#EFFECT_OFFSETS"></model-nav-bar> -->
		<view class="container">
		
	<view class="search">
		<uni-easyinput prefixIcon="search" v-model="searchVal" placeholder="searchvalue" @iconClick="iconClick" @confirm="HandleSearch">
					</uni-easyinput>
	</view>
	<view class="context" >
		<view class="banner">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex"
			 indicator-dots="true" indicator-color="#999" indicator-active-color="#d5d5d5" autoplay="2000">
							<swiper-item v-for="(item, index) in 3" :key="index">
								<view class="swiper-item" :class="'swiper-item' + index">
									<text style="color: #37afff; font-size: 32px;">{{index+1}}</text>
						</view>
							</swiper-item>
						</swiper>	
		</view>
		<scroll-notice></scroll-notice>
	</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import {SYSTEM_WINDOW_INFO,MENU_BUTTON_RECT_INFO,COLOR_THEME_PRIMARY} from "@/utils/config.js"
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'

const searchVal = ref('')
const swiperDotIndex = ref(0)

// 图标点击事件
const iconClick = () => {
	console.log('搜索图标被点击')
	HandleSearch()
}

// 搜索处理
const HandleSearch = () => {
	console.log('搜索内容:', searchVal.value)
	// 在这里处理搜索逻辑
}

// swiper 切换事件
const change = (e) => {
	swiperDotIndex.value = e.detail.current
}

</script>

<style lang="scss" scoped>
.page-wrap {
	width: 100%;
	min-height: 100vh;
}

.container {
	padding: 20rpx;
	// background-color:v-bind(COLOR_THEME_PRIMARY) ;
}

.search {
	width: 100%;
	border-radius: 30rpx;
	overflow: hidden;
}
.swiper-item{
	border-radius: 20rpx;
	overflow: hidden;
}
</style>
